{% extends "base.html" %}

{% block content %}
<div class="algorithm-page">
    <h2>PVD算法 - 像素值差分隐写</h2>
    
    <div class="algorithm-description">
        <p>PVD算法通过调整相邻像素对之间的差值来隐藏信息，具有较好的隐蔽性。</p>
        <p><strong>使用提示：</strong>PVD算法在图像平滑区域隐藏效果更好，建议使用纹理丰富的图像。</p>
    </div>
    
    <div class="algorithm-controls">
        <div class="control-section">
            <h3>嵌入信息</h3>
            <form id="embed-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="embed-image">选择载体图像:</label>
                    <input type="file" id="embed-image" name="image" accept="image/png,image/jpeg,image/bmp" required>
                    <small>支持格式: PNG, JPEG, BMP</small>
                </div>
                
                <div class="form-group">
                    <label for="embed-message">隐藏信息:</label>
                    <textarea id="embed-message" name="message" rows="4" placeholder="输入要隐藏的信息" required></textarea>
                    <small>支持中文和英文文本</small>
                </div>
                
                <div class="form-group">
                    <label for="embed-channel">嵌入通道:</label>
                    <select id="embed-channel" name="channel">
                        <option value="0">蓝色通道 (Blue)</option>
                        <option value="1">绿色通道 (Green)</option>
                        <option value="2">红色通道 (Red)</option>
                    </select>
                </div>
                
                <button type="submit" class="btn">嵌入信息</button>
            </form>
            
            <div id="embed-result" class="result"></div>
        </div>
        
        <div class="control-section">
            <h3>提取信息</h3>
            <form id="extract-form" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="extract-image">选择隐写图像:</label>
                    <input type="file" id="extract-image" name="image" accept="image/png,image/jpeg,image/bmp" required>
                    <small>请使用嵌入时生成的图像</small>
                </div>
                
                <div class="form-group">
                    <label for="extract-channel">提取通道:</label>
                    <select id="extract-channel" name="channel">
                        <option value="0">蓝色通道 (Blue)</option>
                        <option value="1">绿色通道 (Green)</option>
                        <option value="2">红色通道 (Red)</option>
                    </select>
                </div>
                
                <button type="submit" class="btn">提取信息</button>
            </form>
            
            <div id="extract-result" class="result">
                <label>提取的信息:</label>
                <textarea id="extracted-message" rows="4" readonly placeholder="提取的信息将显示在这里"></textarea>
                <div id="extract-status"></div>
            </div>
        </div>
    </div>
    
    <div class="algorithm-info">
        <h3>PVD算法原理</h3>
        <div class="info-content">
            <p><strong>工作原理：</strong></p>
            <ul>
                <li>将图像分成相邻的像素对</li>
                <li>计算像素对之间的差值</li>
                <li>根据差值范围确定可嵌入的位数</li>
                <li>调整像素值来嵌入信息</li>
            </ul>
            
            <p><strong>优点：</strong></p>
            <ul>
                <li>根据图像纹理自适应嵌入容量</li>
                <li>在边缘区域嵌入更多信息</li>
                <li>隐蔽性较好</li>
            </ul>
            
            <p><strong>范围表：</strong></p>
            <table class="range-table">
                <thead>
                    <tr>
                        <th>差值范围</th>
                        <th>可嵌入位数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>[0, 7]</td><td>3 位</td></tr>
                    <tr><td>[8, 15]</td><td>3 位</td></tr>
                    <tr><td>[16, 31]</td><td>4 位</td></tr>
                    <tr><td>[32, 63]</td><td>5 位</td></tr>
                    <tr><td>[64, 127]</td><td>6 位</td></tr>
                    <tr><td>[128, 255]</td><td>7 位</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="debug-info">
        <h3>调试信息</h3>
        <div id="debug-console" style="background: #f8f9fa; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 12px; height: 100px; overflow-y: auto;"></div>
    </div>
</div>

<script>
    function debugLog(message) {
        const console = document.getElementById('debug-console');
        const timestamp = new Date().toLocaleTimeString();
        console.innerHTML += `[${timestamp}] ${message}\n`;
        console.scrollTop = console.scrollHeight;
    }

    document.getElementById('embed-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const resultDiv = document.getElementById('embed-result');
        
        debugLog('开始PVD嵌入信息...');
        debugLog(`使用通道: ${formData.get('channel')}`);
        
        fetch('/embed_pvd', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                resultDiv.innerHTML = `
                    <div class="success">${data.message}</div>
                    <a href="${data.image_url}" class="btn" download>下载隐写图像</a>
                `;
                debugLog('PVD信息嵌入成功！');
            } else {
                resultDiv.innerHTML = `<div class="error">${data.error}</div>`;
                debugLog(`PVD嵌入失败: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            resultDiv.innerHTML = `<div class="error">发生错误: ${error.message}</div>`;
            debugLog(`PVD请求错误: ${error.message}`);
        });
    });
    
    document.getElementById('extract-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const statusDiv = document.getElementById('extract-status');
        const messageTextarea = document.getElementById('extracted-message');
        
        statusDiv.innerHTML = '<div>正在提取信息...</div>';
        messageTextarea.value = '';
        debugLog('开始PVD提取信息...');
        debugLog(`使用通道: ${formData.get('channel')}`);
        
        fetch('/extract_pvd', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                messageTextarea.value = data.message;
                if (data.message) {
                    statusDiv.innerHTML = '<div class="success">信息提取成功！</div>';
                    debugLog('PVD信息提取成功！');
                } else {
                    statusDiv.innerHTML = '<div class="error">未找到隐藏信息</div>';
                    debugLog('未找到PVD隐藏信息');
                }
            } else {
                messageTextarea.value = '';
                statusDiv.innerHTML = `<div class="error">${data.error}</div>`;
                debugLog(`PVD提取失败: ${data.error}`);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            messageTextarea.value = '';
            statusDiv.innerHTML = `<div class="error">发生错误: ${error.message}</div>`;
            debugLog(`PVD请求错误: ${error.message}`);
        });
    });

    // 页面加载完成提示
    document.addEventListener('DOMContentLoaded', function() {
        debugLog('PVD算法页面加载完成');
        debugLog('准备进行像素值差分隐写操作');
    });
</script>

<style>
.algorithm-info {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.algorithm-info h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e74c3c;
}

.info-content {
    line-height: 1.6;
}

.info-content p {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.info-content ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.info-content li {
    margin-bottom: 0.25rem;
}

.range-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.range-table th,
.range-table td {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: center;
}

.range-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.range-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    background-color: white;
}

.form-group select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .algorithm-controls {
        grid-template-columns: 1fr;
    }
    
    .range-table {
        font-size: 0.8rem;
    }
}

/* 动画效果 */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* 结果样式 */
.success {
    background-color: #d4edda;
    color: #155724;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    border: 1px solid #f5c6cb;
}

.result {
    margin-top: 1rem;
}

#extracted-message {
    background-color: #f8f9fa;
    width: 100%;
    margin-top: 0.5rem;
    font-family: inherit;
}
</style>
{% endblock %}